<template>
  <div class="content-user-wrap">
    <div class="user-information">
      <div class="user-photo" :style="{background:'url('+userData.user.user_photo+') center center no-repeat',backgroundSize:'100% 100%'}" />
      <div class="user-wrap">
        <div class="user-name">
          {{ userData.user.user_name }}
        </div>
        <div class="created-at">
          {{ times(userData.created_at) }}
        </div>
      </div>
    </div>
    <nuxt-link to="/aboutus/follow">
      <div class="follow-button" />
    </nuxt-link>
  </div>
</template>
<script>
import { times } from '@/utils/util'
export default {
  name: 'User',
  components: {
  },
  props: {
    userData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      times
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
  }
}
</script>
<style scoped lang="scss">
  .content-user-wrap{
    width: 100%;
    height: 44px;
    margin-top: 10px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user-information{
      display: flex;
      .user-photo{
        width:36px;
        height:36px;
        border-radius: 50%;
      }
      .user-wrap{
        margin-left: 6px;
        .user-name{
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(153,153,153,1);
          line-height:20px;
        }
        .created-at{
          font-size:12px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(153,153,153,1);
          line-height:17px;
        }
      }
    }
    .follow-button{
      width:65px;
      height:29px;
      background: url('~assets/img/follow-button.png') center center no-repeat;
      background-size: 100% 100%;
    }
    .follow-button:hover{
      width:65px;
      height:29px;
      background: url('~assets/img/follow-button-hover.png') center center no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
</style>
